<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <link href="/css/css.css" rel="stylesheet" type="text/css" />
  <link href="/css/common.css" rel="stylesheet" type="text/css" />
  <link href="/css/Orders.css" rel="stylesheet" type="text/css" />
  <script src="/js/jquery.foucs.js" type="text/javascript"></script>
  <script src="/js/jquery-1.9.1.min.js" type="text/javascript"></script>
  <script src="/js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
  <script src="/js/layer/layer.js"></script>
  <script src="/js/axios.min.js"></script>
  <script src="/js/vue.js"></script>
  <title>用户中心</title>
  <script th:inline="javascript">

    window.onload = function(){
      axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
      //获取order订单数组
      var orders = [[${orders}]];

      //创建vue对象
      let vue = new Vue({
        el:"#user",
        data:{
          //控制订单、订单明细展示
          isShow: true,
          //控制地址栏、评论展示
          evalShow: false,
          order: {
          },
          orders: orders,

        },
        methods:{
          //实现订单与订单明细的切换
          getOrder:function(id){
            //根据点击传入的id从orders中获取对应的order
            this.isShow = false;
            for(let o of orders){
              if(o.id === id){
                this.order = o;
                break;
              }
            }
          },

          //确认收货
          confirmOrder:function(){
            let order = this.order;
            order.status = 5;
            //将order发送至后台修改数据库
            axios.post("update",order,{
              withCredentials:false
            }).then((r) => {
              //console.log(r.data)
              if(r.data.code === 200){
                console.log("修改成功");
                alert("订单已接收")
              }
            });
          },

          //前往支付
          goPay:function(){
            location.href="/front/alipay/pay/"+this.order.id;
          },

          //前往评论
          goReview:function(){
            //console.log(this.order);
            this.evalShow = true;
          },

          //提交评论
          setReview:function(){
            console.log(this.order);
            axios.post("/ucenter/order/review",this.order,{
              withCredentials:false
            }).then(r =>{
              if(r.data.code === 200){
                //评价成功
                this.order = r.data.data;
                alert("评价成功");
                //修改展示状态
                this.evalShow = false;
              }else{
                alert(r.data.msg);
              }
            });
          }
        },

      });
    }
  </script>

</head>
<body>
<div class="user_style clearfix" id="user">
<div class="r_user_style">
  <div class="Notice"><span>系统最新公告:</span>为了更好地服务于【每日鲜】的会员朋友及读者 发表意见。</div>
  <div class="clearfix">
    <div class="user_info clearfix">
      <div class="user_name_info">
        <ul>
          <li class="us_one">
            <div class="name left">用户名:<b  th:text="${user.account}"></b>,  欢迎你 [<a href="#">修改密码</a>]  </div>
          </li>
          <li class="us_two">
            <dl><dt class="left">账户余额：</dt><dd>￥<b>0</b>元</dd></dl>
            <dl><dt class="left" >账户积分：</dt><dd><b   th:text="${user.score}"></b>分 &nbsp;<a href="../credit/list">[积分商城]</a></dd></dl>
            <dl><dt class="left">用户等级：</dt><dd><b>普通会员</b></dd></dl>
          </li>
          <li class="us_Order">
            <dl><dt class="left">未完成订单：</dt><dd><a th:href="@{/ucenter/order/list}" th:text="${orderDoing}"></a></dd></dl>
            <dl><dt class="left">完成订单：</dt><dd><a href="#" th:text="${orderOver}"></a></dd></dl>
          </li>
          <li class="us_four">
            <div class="Address"><em></em><a th:href="@{/ucenter/address/show}">地址管理&gt;</a></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="user_info_p_s clearfix">
    <!--订单整体展示-->
    <div class="left_user_cont"  v-show="isShow">
      <div class="us_Orders left clearfix">
        <div class="Orders_name">
          <div class="title_name">
            <div class="Records">购买记录</div>
          </div>
        </div>
        <table>
          <thead>
          <tr>
            <th>产品名称</th>
            <th>数量</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody th:each="order : ${orders}">
          <tr th:each="orderitem : ${order.orderitems}">
            <td class="img">
              <a href="javascript:void(0)" th:@click="|getOrder(${order.id})|">
                <span class="left"><img th:src="${orderitem.sku.spu.preview}"></span>
                <span class="left" th:text="${orderitem.sku.spu.name}"></span>
              </a>
            </td>
            <td th:text="${orderitem.mount}"></td>
            <td th:if="${order.status eq '1'}" th:text="待支付"></td>
            <td th:if="${order.status eq '2'}" th:text="待发货"></td>
            <td th:if="${order.status eq '3'}" th:text="已发货"></td>
            <td th:if="${order.status eq '4'}" th:text="待收货"></td>
            <td th:if="${order.status eq '5'}" th:text="待评价"></td>
            <td th:if="${order.status eq '6'}" th:text="已完成"></td>
            <td><a href="javascript:void(0)" th:@click="|getOrder(${order.id})|">查看</a></td>
          </tr>
          </tbody>
        </table>
        <div class="us_jls">共<span th:text="${itemscount}"></span>条记录</div>
      </div>
    </div>

    <!--单个订单展示-->
    <div id="Orders" class="Inside_pages clearfix" v-show="!isShow">
      <div class="Orders_style clearfix">

        <!--订单地址展示-->
        <div class="address clearfix" v-show="!evalShow">
          <div class="adderss_list clearfix">
            <div class="title_name">收货地址</div>
            <div class="Shipping_address">
              <ul class="detailed">
                <li><label>收货人姓名</label><span >{{order.accept}}</span></li>
                <li><label>联系方式</label><span>{{order.tel}}</span></li>
                <li><label>详细地址</label><span>{{order.address}}</span></li>
                <li><label>订单状态</label>
                  <span v-if="order.status == '1'">待支付</span>
                  <span v-if="order.status == '2'">待发货</span>
                  <span v-if="order.status == '3'">已发货</span>
                  <span v-if="order.status == '4'">待收货</span>
                  <span v-if="order.status == '5'">待评价</span>
                  <span v-if="order.status == '6'">已完成</span>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!--评论展示-->
        <div class="address clearfix" v-show="evalShow">
          <div class="adderss_list clearfix">
            <div class="title_name">评论表</div>
            <div class="Shipping_address">
              <ul class="detailed" v-for="(orderitem,index) in order.orderitems">
                <li><label>商品名</label><span>{{orderitem.sku.spu.name}}</span>
                </li>
                <li>
                  <label>评价 </label>
                  <label><input type="text" v-model="orderitem.review.content" placeholder="edit me"></label>
                  <label>
                    <select v-model="orderitem.review.type">
                      <option value="1">好评</option>
                      <option value="2">中评</option>
                      <option value="3">差评</option>
                  </select>
                  </label>

                </li>
              </ul>
            </div>
          </div>
        </div>

        <!--产品展示-->
        <div class="Product_List">
          <table>
            <thead>
            <tr class="title">
              <td class="name">商品名称</td>
              <td class="price">商品价格</td>
              <td class="Quantity">购买数量</td>

            </tr>
            </thead>
            <tbody>
              <tr v-for="orderitem in order.orderitems">
                <td class="Product_info" >
                  <a href="#"><img src="Products/11.jpg"  width="100px" height="100px"/></a>
                  <a href="#" class="product_name">{{orderitem.sku.spu.name}}</a>
                </td>
                <td><i>￥</i>{{orderitem.price}}</td>
                <td>{{orderitem.mount}}</td>
              </tr>
            </tbody>
          </table>
          <div class="envelopes">
            <em></em>
            <a th:href="@{/ucenter/order/list}" class="verification_btn">返回订单</a>
            <a href="javascript:void(0)" v-show="order.status == 4" class="verification_btn" @click="confirmOrder"
               style="background: #33FF99;color: #000000" >确认收货</a>
            <a href="javascript:void(0)" v-show="order.status == 1" class="verification_btn" @click="goPay"
               style="background: #33FF99;color: #000000" >前往付款</a>
            <a href="javascript:void(0)" v-show="order.status == 5 && !evalShow" class="verification_btn" @click="goReview"
               style="background: #33FF99;color: #000000" >前往评价</a>
            <a href="javascript:void(0)" v-show="order.status == 5 && evalShow" class="verification_btn" @click="setReview"
               style="background: #33FF99;color: #000000" >提交评价</a>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
</div>

</body>
</html>